<template>
	<view class="page">
		<u-navbar title="读写算" left-icon="">
			<!-- <view class="u-nav-slot" slot="left">
				<image src="../../static/logo.png" class="logo"></image>
			</view> -->
			<view class="u-nav-slot" slot="right">
				<view class="nav-right" @click="openPopUp"> 
					<u-icon name="list" size="28" style="margin-left: 20rpx;" color="#000"></u-icon>
				</view>

			</view>
		</u-navbar>
		<!-- 轮播 -->
		<view class="banner">
			<u-swiper :list="banner_list" :indicator="true"  indicatorActiveColor="#376DB5"
				indicatorMode="dot"></u-swiper>
		</view>
			
		<!-- 分类导航 -->
		<view class="cate_nav">
			<view class="cate_nav_item"  @click="gotoWzjs">
				<image src="../../static/n4.png" class="cate_nav_item_img"></image>
				<view class="cate_nav_item_title font-28">文章检索</view>
			</view>
			<view class="cate_nav_item"  @click="gotoQkml">
				<image src="../../static/n3.png" class="cate_nav_item_img"></image>
				<view class="cate_nav_item_title font-28">期刊目录</view>
			</view>
			<view class="cate_nav_item" @click="gotoTgxz">
				<image src="../../static/n2.png"   class="cate_nav_item_img"></image>
				<view class="cate_nav_item_title font-28">投稿须知</view>
			</view>
			<view class="cate_nav_item" @click="gotoJournalIntr">
				<image src="../../static/n1.png" class="cate_nav_item_img"></image>
				<view class="cate_nav_item_title font-28">期刊介绍</view>
			</view>
		</view>
	
		<!-- 公告 -->
		<view class="notice" v-if="notice_msg" @click="gotoLuList">
			<view class="notice-left">录用公告</view>
			<u-notice-bar :text="notice_msg" icon="" fontSize="13" duration="3000" bgColor="#fff" color="#666666"
				direction="column"></u-notice-bar>
			<view class="notice-right">已录用</view>
		</view>
		<!-- 分类导航 -->
	<!-- 	<view class="nav-box">
			<view class="nav-box-left" @click="gotoQkml">
				<image src="../../static/icon1.png" class="nav-box-left-img"></image>
				<view class="nav-box-left-content">
					<view class="nav-box-left-title">往期目录</view>
					<view class="nav-box-left-sub-title">回顾历史期刊</view>
				</view>
			</view>
			<view class="nav-box-left" @click="gotoQkdt">
				<image src="../../static/icon2.png" class="nav-box-left-img"></image>
				<view class="nav-box-left-content">
					<view class="nav-box-left-title">精选期刊</view>
					<view class="nav-box-left-sub-title">查阅热门期刊</view>
				</view>
			</view>
		</view> -->
		<!-- 期刊介绍 -->
	<!-- 	<view class="qgje" @click="gotoJournalIntr">
			<view class="first_level_heading qgje-title">期刊介绍</view>
			<view class="qgje-box">
				<view class="qgje-box-left">
					<image :src="jkjs.photo" class="qgje-box-left-img"></image>
				</view>
				<view class="qgje-box-right">
					<view class="qgje-box-right-t  font-24" v-html="jkjs.description">
					</view>
					<view class="qgje-box-right-bb">
						<view class="qgje-box-right-b">
							详情
						</view>
					</view>

				</view>
			</view>
		</view> -->
		<!-- 期刊图片 -->
		<view class="qk-imgs" v-if="qkimg">
			<view class="qk-imgs-title" @click="gotoQkImg">
				<view class="first_level_heading">期刊图片</view>
				<view class="font-24" style="display: flex;flex-direction: row;align-items: center;">
					<view>更多</view>
					<u-icon name="arrow-right" size="16" top="3rpx" color="#999999"></u-icon>
				</view>
				
			</view>
			<scroll-view scroll-x>
				<view class="image-box" v-for="(item, index) in qkimg" :key="index" @click="gotoQkImgDetail(item)">
					<image :src="item.photo" class="image-box-img"></image>
					<view class="font-28 image-box-text">{{item.title}}</view>
				</view>
			</scroll-view>
		</view>
		<!-- 期刊动态 -->
		<view class="qk-dynamic" v-if="qkdt">
			<view class="qk-imgs-title">
				<view class="first_level_heading">期刊动态</view>
				
				<view class="font-24" style="display: flex;flex-direction: row;align-items: center;" @click="gotoMoreDt">
					<view>更多</view>
					<u-icon name="arrow-right" size="16" top="3rpx" color="#999999"></u-icon>
				</view>
				
				<!-- <u-icon name="arrow-right" size="18" color="#999999" @click="gotoMoreDt"></u-icon> -->
			</view>
			<view class="qk-dynamic-box">

				<view class="qk-dynamic-box-item" v-for="(item,index) in qkdt" :key="index">
					<image :src="item.photo" v-if="item.photo" class="qk-dynamic-box-item-img"></image>

					<view class="qk-dynamic-box-item-content" style="width: 650rpx;" v-if="!item.photo"
						@click="gotoDetail(item)">
						<view class="qk-dynamic-box-item-content-t font-28">
							{{item.title}}
						</view>
						<view class="qk-dynamic-box-item-content-b">
							<view class="font-24">{{item.addtime}}</view>
						<!-- 	<view class="font-24 qk-dynamic-box-item-content-bbb">
								<u-icon name="eye" style="margin-right: 10rpx;" color="#999999" size="18"></u-icon>
								<text>{{item.hits}}</text>
							</view> -->
						</view>
					</view>

					<view class="qk-dynamic-box-item-content" v-if="item.photo" @click="gotoDetail(item)">
						<view class="qk-dynamic-box-item-content-t font-28">
							{{item.title}}
						</view>
						<view class="qk-dynamic-box-item-content-b">
							<view class="font-24">{{item.addtime}}</view>
							<!-- <view class="font-24 qk-dynamic-box-item-content-bbb">
								<u-icon name="eye" style="margin-right: 10rpx;" color="#999999" size="18"></u-icon>
								<text>{{item.hits}}</text>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<Footer></Footer>
		<u-back-top :scroll-top="scrollTop" bottom="20" icon="arrow-up" right="10"
			:iconStyle="{color:'#535b8a'}"></u-back-top>
		<!-- 首页弹框 -->
		<CommonTk ref="commonTk"></CommonTk>
	</view>
</template>

<script>
	import {
		api,
		BaseImgUrl,
		http
	} from '@/config/common.js'
	import Footer from '@/components/Footer.vue'
	import CommonTk from '@/components/CommonTk.vue'
	export default {
		data() {
			return {
				scrollTop: 0,
				notice_msg: [],
				banner_list: [],
				jkjs: '',
				qkimg: [],
				qkdt: []
			}
		},
		components: {
			Footer,
			CommonTk
		},
		filters: {},
		mounted() {},
		onLoad(e) {
			this.getBanner()
			this.getLy()
			this.getQkJs()
			this.getQkImgs()
			this.getQkDt()
		},
		onShow() {},
		beforeDestroy() {},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			gotoLuList(){
				uni.navigateTo({
					url:'/pages/other/lu_list'
				})
			},
			gotoTgxz(){
				uni.navigateTo({
					url:'/pages/other/tg_xz'
				})
			},
			gotoWzjs(){
				uni.navigateTo({
					url:'/pages/article/search'
				})
			},
			gotoQkImgDetail(item) {
				if (item.glqs_id && item.glqstr) {
					uni.navigateTo({
						url: '/pages/journal_introduction/list?id=' + item.glqs_id + '&str=' + item.glqstr
					})
				}
			},
			gotoQkImg() {
				uni.navigateTo({
					url: '/pages/journal_introduction/more_img'
				})
			},
			gotoQkml() {
				uni.navigateTo({
					url: '/pages/journal_introduction/index?nav=4'
				})
			},
			gotoQkdt() {
				uni.navigateTo({
					url: '/pages/journal_dynamics/index?isxj=1'
				})
			},
			gotoDetail(item) {
				uni.navigateTo({
					url: '/pages/journal_introduction/detail?id=' + item.id
				})
			},
			gotoMoreDt() {
				uni.navigateTo({
					url: '/pages/journal_dynamics/index'
				})
			},
			openPopUp() {
				this.$refs.commonTk.openShow()
			},

			//期刊介绍
			gotoJournalIntr() {
				uni.navigateTo({
					url: '/pages/journal_introduction/index'
				})
			},
			//获取banner
			getBanner() {
				api.post('api/banner/list', {}).then(res => {
					let rst = res.data
					let banner = [];
					if (rst.code == 1) {
						rst.data.forEach(function(item, index) {
							banner.push(BaseImgUrl + item.images)
						});
					}
					this.banner_list = banner
				}).catch(err => {})
			},
			//路由公告
			getLy() {
				api.post('api/index/hireNotice', {}).then(res => {
					let rst = res.data
					let temp = [];
					if (rst.code == 1) {
						rst.data.forEach(function(item, index) {
							temp.push(item.subtitle + "（" + item.title + "）");
						});
					}
					this.notice_msg = temp
				}).catch(err => {})
			},
			//期刊介绍
			getQkJs() {
				api.post('api/index/single', {
					id: 22
				}).then(res => {
					let rst = res.data
					let temp = [];
					if (rst.code == 1) {
						rst.data.photo = BaseImgUrl + 'upfile/' + rst.data.photo
						this.jkjs = rst.data
					}
				}).catch(err => {})
			},
			//期刊图片
			getQkImgs() {
				api.post('api/index/columns', {
					id: 372,
					page: 1,
					pageSize: 10
				}).then(res => {
					let rst = res.data
					if (rst.code == 1) {
						rst.data.data.forEach(function(item, index) {
							rst.data.data[index]['photo'] = BaseImgUrl + 'upfile/' + item.photo
						});
						this.qkimg = rst.data.data
					}
				}).catch(err => {})
			},
			//期刊动态
			getQkDt() {
				api.post('api/index/columns', {
					id: 27,
					page: 1,
					pageSize: 10
				}).then(res => {
					let rst = res.data
					if (rst.code == 1) {
						rst.data.data.forEach(function(item, index) {
							rst.data.data[index]['photo'] = BaseImgUrl + 'upfile/' + item.photo
						});
						this.qkdt = rst.data.data
					}
				}).catch(err => {})
			}
		}
	};
</script>

<style scoped>
	.cate_nav{
		width: 690rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}
	.cate_nav_item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.cate_nav_item_img{
		width: 98rpx;
		height: 98rpx;
		margin-bottom: 10rpx;
		
	}
	.search-list {
		margin-top: 30rpx;
	}

	.search-list-item {
		font-weight: 400;
		color: #FFFFFF;
		width: 690rpx;
		height: 90rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 2rpx solid #FFFFFF;
	}

	.pop-up-search {
		width: 686rpx;
		height: 66rpx;
		border: 1px solid #FFFFFF;
		border-radius: 33rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx;
	}

	.pop-up-close {
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}

	.home-pop-up-box {
		width: 750rpx;
	}

	.qk-dynamic-box-item-content-bbb {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.qk-dynamic-box-item-content-b {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.qk-dynamic-box-item-content-t {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.qk-dynamic-box-item-content {
		width: 430rpx;
		height: 144rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.qk-dynamic-box-item-img {
		width: 192rpx;
		height: 144rpx;
		border-radius: 10rpx;
	}

	.qk-dynamic-box-item:last-of-type {
		border-bottom: none;
	}

	.qk-dynamic-box-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #E5E5E5;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		/* width: 690rpx; */
	}

	.qk-dynamic-box {
		padding: 20rpx;
	}

	.qk-dynamic {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.image-box-text {
		width: 188rpx;
		word-break: break-all;
		word-wrap: break-word;
		white-space: pre-wrap;
		text-align: center;
	}

	.image-box {
		padding-left: 20rpx;
		display: inline-block;
		width: 188rpx;
		margin-right: 20rpx;
	}

	.image-box-img {
		width: 188rpx;
		height: 253rpx;
	}

	.qk-imgs {
		width: 690rpx;
		/* height: 413rpx; */
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		background-color: #fff;
		margin: 0 auto;
		margin-top: 30rpx;
		white-space: nowrap;
		padding-bottom: 20rpx;
		border-radius: 10rpx;
	}

	.qk-imgs-title {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
	}

	.qgje-title {
		margin-bottom: 40rpx;
	}

	.qgje-box-left {
		width: 25%;
	}

	.qgje-box-left-img {
		width: 174rpx;
		height: 238rpx;
		background: #C3DFE3;
		box-shadow: 0rpx 5rpx 18rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 8rpx;
		margin-top: -40rpx;
		margin-left: -30rpx;
	}

	.qgje-box-right-t {
		height: 150rpx;
		line-height: 40rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
	}

	.qgje-box-right {
		width: 75%;
	}

	.qgje-box-right-bb {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}

	.qgje-box-right-b {
		width: 100rpx;
		height: 40rpx;
		background: #376DB5;
		border-radius: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #FFFFFF;
		font-weight: 400;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}

	.qgje-box {
		width: 676rpx;
		height: 250rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-image: url('../../static/bg1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 20rpx;
		margin-top: 20rpx;
	}

	.qgje {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		margin-left: 40rpx;
	}

	.nav-box-left-sub-title {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FEFEFE;
		margin-top: 20rpx;
	}

	.nav-box-left-title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FEFEFE;
	}

	.nav-box-left-content {
		position: absolute;
		top: 30rpx;
		left: 20rpx;
	}

	.nav-box-left-img {
		width: 330rpx;
		height: 140rpx;
	}

	.nav-box-left {
		position: relative;
	}

	.nav-box {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.notice-right {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FF0101;
	}

	.notice-left {
		width: 56rpx;
		height: 64rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #535b8a;
		line-height: 34rpx;

	}

	.notice {
		width: 690rpx;
		height: 94rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 20rpx;
	}

	::v-deep .u-swiper__wrapper {
		width: 690rpx !important;
		height: 286rpx !important;
		border-radius: 6rpx;
	}

	::v-deep .u-swiper__wrapper__item__wrapper__image {
		width: 690rpx !important;
		height: 286rpx !important;
		border-radius: 6rpx;
	}

	::v-deep .u-swiper {
		height: 286rpx !important;
	}

	.banner {
		width: 690rpx;
		height: 286rpx;
		background: #376CB4;
		border-radius: 6rpx;
		margin: 0 auto;
		margin-top: 120rpx;
	}

	::v-deep .u-navbar__content {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(4, 0, 0, 0.14);
	}

	.nav-right {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.logo {
		width: 306rpx !important;
		height: 55rpx !important;
	}
</style>